<template>
  <div>
    <el-form :label-position="'left'" label-width="150px">
      <el-form-item label="活动方">
        <el-select value-key="id" v-model="member.activityOwnerOption" placeholder="选择">
          <el-option
            v-for="item in activityOwnerOptions"
            :key="item.value"
            :label="item.name"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动类型">
        {{member.activityOwnerOption.type_name}}
      </el-form-item>
      <el-form-item label="活动方头像">
        <img v-if="member.activityOwnerOption" :src="member.activityOwnerOption.logo_url" class="avatar">
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          class="avatar-uploader"
          action="https://hks.cn/api/file/upload-img"
          name="photo"
          :show-file-list="false"
          :on-success="handlePhoto"
          :before-upload="beforeAvatarUpload">
          <img v-if="photoImg" :src="photoImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="member.name" style="width:400px"></el-input>
      </el-form-item>
      <!-- <el-form-item label="描述">
          <el-input v-model="member.desc" style="width:400px"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="联系方式">
          <el-input v-model="member.phone" type="phone"  style="width:400px"></el-input>
      </el-form-item> -->
      <el-form-item label="活动地址" prop="origin">
        <el-cascader
          placeholder="选择地址"
          :options="ORIGIN"
          :props="{value:'label'}"
          v-model="member.address"
          class="cascader"
          filterable></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="member.addressDetail" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="活动费用">
        <el-input v-model="member.cost" style="width:400px" type="number"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                        v-model="member.startTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间">
        <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                        v-model="member.endTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="报名表字段">
        <el-select multiple collapse-tags v-model="member.sign_up_table" clearable placeholder="请选择">
          <el-option
            v-for="item in TableField"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否需要审核">
        <el-switch
          v-model="types"
          active-color="#13ce66"
          inactive-color="#ff4949" @change="ha"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="活动详情">
        <vue-ueditor-wrap v-model="detail" :config="myConfig"></vue-ueditor-wrap>
      </el-form-item>

      <div class="add-table-wrapper">
        <el-button type="primary" @click="commit" class="add-table-wrapper-btn">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import ORIGIN from '../../assets/json/origin.json'

  export default {
    data() {
      return {
        loading: false,
        ORIGIN,
        id: '',
        photoImg: '',
        photoId: '',
        intelligenceImg: '',//资质证明
        intelligenceID: '',
        member: {
          activityTypeOption: 1,//是否官方
          activityOwnerOption: '',//活动方
          name: '',
          desc: '',
          cost: '',
          address: [],
          addressDetail: '',
          startTime: '',
          endTime: '',
          is_review: 0,
          sign_up_table: []
        },
        types: false,
        activityTypeOptions: [
          {label: '官方', value: 1},
          {label: '非官方', value: 2}

        ],
        TableField: [],


        activityOwnerOptions: [],
        detail: '',
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 500,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          // serverUrl: 'http://35.201.165.105:8000/controller.php',
          serverUrl: 'https://hks-sys.dindong.cn/ueditor-php/controller.php',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
          //UEDITOR_HOME_URL: '/static/UEditor/'
          toolbars: [
            [
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'strikethrough',
              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
              'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
              'simpleupload', 'insertimage', 'insertvideo', 'music',
              'horizontal', 'date', 'time',
              'inserttable'
            ]
          ]
        }

      }
    },
    methods: {
      ha(e) {
        if (e) {
          this.member.is_review = 1
        } else {
          this.member.is_review = 0
        }
      },
      //获取报名表字段
      async getSignUpTableField(){
        let res = await this.$api.getSignUpTableField();
        if (res.data.level == 'success'){
          this.TableField = res.data.data;
        }
      },
      async commit() {
        let params = {
          id: this.id,
          name: this.member.name,
          active_party_id: this.member.activityOwnerOption.id,
          img_id: this.photoId,
          desc: this.member.desc,
          province: this.member.address[0],
          city: this.member.address[1],
          area: this.member.address[2],
          address: this.member.addressDetail,
          start_time: this.member.startTime,
          end_time: this.member.endTime,
          cost: this.member.cost,
          detail: this.detail,
          is_review: this.member.is_review,
          sign_up_table: this.member.sign_up_table
        }
        let res = await this.$api.setActivity(params);
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        } else {
          this.$message.error(res.data.message)
        }
      },
      async getActivityDetail() {
        //获取活动详情
        let res = await this.$api.getActivityDetail({id: this.id});
        if (res.data.level == 'success' && res.data.data) {
          let data = res.data.data;
          this.member.activityOwnerOption = data.active_party_Info;
          this.photoImg = data.img_url;
          this.photoId = data.img_id;
          this.member.name = data.name;
          this.member.desc = data.desc;
          this.member.cost = data.cost;
          this.member.address = [data.province, data.city, data.area];
          this.member.addressDetail = data.address;
          this.member.startTime = data.start_time
          this.member.endTime = data.end_time;
          this.detail = data.detail;
          let str = [];
          data.sign_up_table.forEach(item=>{
            str.push(item.value);
          })
          this.member.sign_up_table = str;
          this.is_review = data.is_review;
          if (parseInt(data.is_review)==1){
            this.types = true;
          } else {
            this.types = false;
          }
        }
      },
      beforeAvatarUpload(file) {
        //上传照片前的操作
        // console.log(file,555)
      },
      handlePhoto(res, file) {
        //上传照片成功
        if (res.data) {
          this.photoImg = res.data.img_url;
          this.photoId = res.data.id;
        }
      },
      getExecutor(e) {
        console.log(e, 111)
      },
      async searchName(searchText) {
        //搜索需求
        this.loading = true;
        if (!searchText) {
          this.activityOwnerOptions = [];
          this.loading = false
          return
        }

        let params = {
          keyword: searchText
        }
        let res = await this.$api.getActivePartyList(params);

        if (res.data.level == 'success') {
          this.activityOwnerOptions = res.data.data
        }
        this.loading = false
      },
      async getActivePartyList(searchText) {

        let res = await this.$api.getActivePartyList();

        if (res.data.level == 'success') {
          this.activityOwnerOptions = res.data.data
        }
        this.loading = false
      }
    },
    mounted() {
      this.getActivePartyList()
      this.id = this.$route.query.id;
      if (this.id) {
        this.getActivityDetail()
      }
      this.getSignUpTableField();
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }

  .add-table-wrapper {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }

  .memberPicWrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .memberPicDetail {
    text-align: center;
    margin: 0 10px;
    position: relative;

    .delete {
      width: 20px;
      height: 20px;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
</style>
